<template>
  <div class="page-fs position-relative">
    <ECharts :opt="opt" />
  </div>
</template>

<script setup>
import ECharts from '@/views/study/study-echarts/Echarts'

var domImg = document.createElement('img');
domImg.style.height = domImg.height = domImg.width = domImg.style.width = '8px';
domImg.src =
    '';

document.body.append(domImg)

const opt = {
  geo: [{
    map: 'BeiJing',
    projection: {
      project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],
      unproject: (point) => [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]
    },
    roam: true,
    itemStyle: {
      // color: '#3063db',
      borderWidth: 1,
      borderColor: '#cfe3fb',
      opacity: 0.9,
      shadowColor:"#3063db",//地图区域的阴影颜色。
      shadowOffsetX:0,
      shadowOffsetY:12,
      normal: {
        borderColor: '#2ab8ff',
        borderWidth: 1,
        areaColor: {
          image: domImg,
        },
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowBlur: 0,
        shadowOffsetX: 0,
        shadowOffsetY: 1,
      },
    },
  }]
}
</script>

<style scoped>
#main {
  transform:rotateX(120deg);
  -ms-transform:rotateX(120deg); 	/* IE 9 */
  -moz-transform:rotateX(120deg); 	/* Firefox */
  -webkit-translate:rotateX(120deg); /* Safari 和 Chrome */
  -o-transform:rotateX(120deg); 	/* Opera */
  background: red;
}
</style>